# Content Block Patterns Library This document contains reusable design patterns extracted from the Skene.ai landing page. Each pattern is production-ready and follows the design system guidelines. --- ## 1. Hero Section Pattern **Purpose:** Main landing section with headline, description, and CTA **Structure:** - Badge/Label (optional) - Large headline (96px or 48px) - Subtitle/description - Primary CTA button - Optional secondary CTA **Example:** ```tsx
{/* Badge */}
CUSTOMER SUCCESS AI AGENT
{/* Headline */}

Quickly build
product-led growth

{/* Subtitle */}

AI-powered onboarding and retention. Automatically generated from your codebase.

{/* CTA */}
``` **Variants:** - **Centered:** All content centered (default) - **Left-aligned:** Content aligned to left with visual on right - **With background image:** Add backdrop image with overlay --- ## 2. Stats Grid Pattern **Purpose:** Display key metrics or statistics in a visually striking way **Structure:** - 2-4 stat cards in a row - Large gradient number - Descriptive label underneath - Glassmorphic card background **Example:** ```tsx
{/* Stat Card 1 */}

5m

Average setup time

{/* Stat Card 2 */}

95%

Customer satisfaction

{/* Stat Card 3 */}

3x

Increase in completion rate

``` **Guidelines:** - Use 2-4 cards for optimal visual balance - Keep labels concise (2-4 words) - Use gradient text for emphasis - Maintain consistent card sizing --- ## 3. Feature Grid Pattern **Purpose:** Showcase product features in a scannable grid layout **Structure:** - Section header with badge and title - Grid of feature cards (2 columns) - Each card has badge and description **Example:** ```tsx
{/* Header */}
Product-led growth

More than just onboarding

Everything you need to reach PLG, without the overhead.

{/* Feature Grid */}
{/* Feature Card */}
Success analytics

Real-time visibility into what's working. Track completion rates, identify drop-off points, and measure time-to-activation.

{/* More feature cards... */}
``` **Guidelines:** - Use 4-6 features for best results - Keep descriptions to 2-3 lines - Align cards in 2-column grid - Maintain consistent card heights --- ## 4. How It Works / Process Pattern **Purpose:** Explain a step-by-step process or workflow **Structure:** - Section container with light background - Numbered steps with badges - Text descriptions on left, visual on right - Horizontal dividers between steps **Example:** ```tsx
{/* Header */}
SKENE.AI

How it works

From codebase to product-led growth in four steps.

{/* Steps */}
{/* Step 1 */}
CONNECT

Skene links to GitHub, GitLab, or Bitbucket via read-only authorization. No code changes required.

{/* Visual/Illustration */}
{/* Divider */}
{/* Repeat for other steps */}
``` **Guidelines:** - Use 3-5 steps maximum - Include visual elements when possible - Maintain consistent spacing between steps - Use dividers to separate sections --- ## 5. Pricing Cards Pattern **Purpose:** Display pricing tiers with feature comparison **Structure:** - Section header with pricing badge - 2-3 pricing cards side by side - Popular badge on recommended tier - Clear pricing and features list **Example:** ```tsx
{/* Header */}
PRICING

Simple, reliable, outcome-based pricing

Only pay when your customer succeeds.

{/* Pricing Cards */}
{/* Free Plan */}
getting started

Free plan

0€/month

{['1 live site', 'Up to 5 monthly onboardings', 'Basic analytics'].map((feature) => (

{feature}

))}
{/* Growth Plan (Popular) */}
Popular {/* Same structure as Free Plan but with light colors */}
``` **Guidelines:** - Show 2-3 pricing tiers - Highlight recommended plan - List 3-5 key features per plan - Clear CTA buttons on each card --- ## 6. FAQ Accordion Pattern **Purpose:** Display frequently asked questions in an expandable format **Structure:** - Section header with FAQ badge - List of questions with expand/collapse icons - Dividers between items - Content area positioned to the right **Example:** ```tsx
{/* Header */}
FAQs

Frequently Asked Questions

Everything you need to know about Skene

{/* FAQ Items */}
{/* FAQ Item 1 */}

How do I get started with Skene?

{/* Divider */}
{/* Repeat for other FAQ items */}
``` **Guidelines:** - Use 5-8 FAQ items - Keep questions concise - Align items to right side for visual interest - Add hover states for interactivity --- ## 7. Navigation Header Pattern **Purpose:** Top navigation with logo and menu items **Structure:** - Logo on left - Navigation links in center - CTA button on right - Glassmorphic background (optional) **Example:** ```tsx
{/* Logo */}
{/* Logo SVG */} Skene
{/* Navigation */} {/* CTA Button */}
``` **Guidelines:** - Keep navigation items to 4-6 links - Use sticky/fixed positioning - Add backdrop blur for depth - Highlight active page --- ## 8. CTA Section Pattern **Purpose:** Call-to-action section to drive conversions **Structure:** - Centered content - Compelling headline - Supporting text - Primary CTA button - Optional secondary action **Example:** ```tsx

Ready to transform your onboarding?

Join hundreds of companies using Skene to accelerate product-led growth.

``` **Guidelines:** - Keep headline benefit-focused - Use action-oriented button text - Consider contrast and visual hierarchy - Place strategically throughout page --- ## 9. Footer Pattern **Purpose:** Site footer with links and information **Structure:** - Multi-column layout - Logo and tagline - Link groups - Social media icons - Legal links **Example:** ```tsx ``` **Guidelines:** - Organize links into logical groups - Include essential legal links - Add social media presence - Keep it scannable --- ## Pattern Composition Tips ### Combining Patterns 1. **Typical Landing Page Flow:** - Navigation Header - Hero Section - Stats Grid - Feature Grid - How It Works - Pricing Cards - FAQ - CTA Section - Footer 2. **Product Page Flow:** - Navigation Header - Hero Section - Feature Grid (detailed) - How It Works - CTA Section - Footer 3. **Marketing Page Flow:** - Navigation Header - Hero Section - Stats Grid - Feature Grid - CTA Section - Footer ### Spacing Between Sections - **Small gap:** 62px (`py-[62px]`) - **Medium gap:** 100px (`py-[100px]`) - **Large gap:** 130px (`py-[130px]`) ### Background Alternation Alternate between light and dark backgrounds for visual rhythm: ``` Dark → Light → Dark → Light ``` Or use gradients/overlays for subtle transitions. --- ## Accessibility Considerations - Maintain WCAG AA color contrast (already built into palette) - Use semantic HTML elements - Add ARIA labels for interactive elements - Ensure keyboard navigation works - Provide focus indicators - Use alt text for images - Test with screen readers --- ## Responsive Guidelines All patterns should adapt for mobile devices: - **Desktop:** Full layout as shown - **Tablet (768px):** Reduce padding, stack some elements - **Mobile (640px):** Single column, reduced font sizes, stacked cards Example responsive breakpoints: ```tsx // Desktop
// Responsive
```